<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="../css/mui.css">
    <link rel="stylesheet" href="./css/demo-common.css">
    <link rel="stylesheet" href="./css/atom-one-light.css">
    <script src="./js/jquery-2.2.3.min.js"></script>
    <script src="./js/highlight.pack.js"></script>
    <script src="../js/select.js"></script>
  </head>
  <body>
    <h3>Table表格</h3>

    <h4>默认表格</h4>
    <section>
      <div class="example">
        <table class="table">
          <thead>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Address</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Jay</td>
              <td>23</td>
              <td>New York No. 1 Lake Park</td>
            </tr>
            <tr>
              <td>Mike</td>
              <td>43</td>
              <td>London No. 1 Lake Park</td>
            </tr>
            <tr>
              <td>Larry</td>
              <td>18</td>
              <td>Sidney No. 1 Lake Park</td>
            </tr>
          </tbody>
        </table>
      </div>
      <pre><code>
  &lt;table class="table"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Age&lt;/th&gt;
              &lt;th&gt;Address&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;Jay&lt;/td&gt;
              &lt;td&gt;23&lt;/td&gt;
              &lt;td&gt;New York No. 1 Lake Park&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Mike&lt;/td&gt;
              &lt;td&gt;43&lt;/td&gt;
              &lt;td&gt;London No. 1 Lake Park&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Larry&lt;/td&gt;
              &lt;td&gt;18&lt;/td&gt;
              &lt;td&gt;Sidney No. 1 Lake Park&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
        </code></pre>
    </section>

    <h4>Hover效果</h4>
    <section>
      <div class="example">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Address</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Jay</td>
              <td>23</td>
              <td>New York No. 1 Lake Park</td>
            </tr>
            <tr>
              <td>Mike</td>
              <td>43</td>
              <td>London No. 1 Lake Park</td>
            </tr>
            <tr>
              <td>Larry</td>
              <td>18</td>
              <td>Sidney No. 1 Lake Park</td>
            </tr>
          </tbody>
        </table>
      </div>
      <pre><code>
  &lt;table class="table table-hover"&gt;
      ...
  &lt;/table&gt;
      </code></pre>
    </section>

    <h4>带边框的表格</h4>
    <section>
      <div class="example">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Address</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Jay</td>
              <td>23</td>
              <td>New York No. 1 Lake Park</td>
            </tr>
            <tr>
              <td>Mike</td>
              <td>43</td>
              <td>London No. 1 Lake Park</td>
            </tr>
            <tr>
              <td>Larry</td>
              <td>18</td>
              <td>Sidney No. 1 Lake Park</td>
            </tr>
          </tbody>
        </table>
      </div>
      <pre><code>
  &lt;table class="table table-bordered"&gt;
      ...
  &lt;/table&gt;
      </code></pre>
    </section>

    <h4>没有纵向边框</h4>
    <section>
      <div class="example">
        <table class="table table-bordered-single">
          <thead>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Address</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Jay</td>
              <td>23</td>
              <td>New York No. 1 Lake Park</td>
            </tr>
            <tr>
              <td>Mike</td>
              <td>43</td>
              <td>London No. 1 Lake Park</td>
            </tr>
            <tr>
              <td>Larry</td>
              <td>18</td>
              <td>Sidney No. 1 Lake Park</td>
            </tr>
          </tbody>
        </table>
      </div>
      <pre><code>
  &lt;table class="table table-bordered-single"&gt;
      ...
  &lt;/table&gt;
      </code></pre>
    </section>

    <h4>带条纹的表格</h4>
    <section>
      <div class="example">
        <table class="table table-stripped">
          <thead>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Address</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Jay</td>
              <td>23</td>
              <td>New York No. 1 Lake Park</td>
            </tr>
            <tr>
              <td>Mike</td>
              <td>43</td>
              <td>London No. 1 Lake Park</td>
            </tr>
            <tr>
              <td>Larry</td>
              <td>18</td>
              <td>Sidney No. 1 Lake Park</td>
            </tr>
            <tr>
              <td>Larry</td>
              <td>18</td>
              <td>Sidney No. 1 Lake Park</td>
            </tr>
            <tr>
              <td>Larry</td>
              <td>18</td>
              <td>Sidney No. 1 Lake Park</td>
            </tr>
          </tbody>
        </table>
      </div>
      <pre><code>
  &lt;table class="table table-stripped"&gt;
      ...
  &lt;/table&gt;
      </code></pre>
    </section>

    <h4>头部没有背景颜色</h4>
    <section>
      <div class="example">
        <table class="table">
          <thead class="light">
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Address</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Jay</td>
              <td>23</td>
              <td>New York No. 1 Lake Park</td>
            </tr>
            <tr>
              <td>Mike</td>
              <td>43</td>
              <td>London No. 1 Lake Park</td>
            </tr>
            <tr>
              <td>Larry</td>
              <td>18</td>
              <td>Sidney No. 1 Lake Park</td>
            </tr>
          </tbody>
        </table>
      </div>
      <pre><code>
  &lt;table class="table"&gt;
      &lt;thead class="light"&gt;
        ...
      &lt;/thead&gt;
  &lt;/table&gt;
      </code></pre>
    </section>

    <h4>复杂表格</h4>
    <section>
      <div class="example">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th rowspan="2">Name</th>
              <th rowspan="2">Type</th>
              <th colspan="3">Languages</th>
            </tr>
            <tr>
              <th>Ruby</th>
              <th>JavaScript</th>
              <th>Python</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Alpha Team</td>
              <td>Project 1</td>
              <td class="center-align">
                <i class="fa fa-check font18 green"></i>
              </td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td rowspan="3">Beta Team</td>
              <td>Project 1</td>
              <td class="center-align">
                <i class="fa fa-check font18 green"></i>
              </td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>Project 2</td>
              <td></td>
              <td class="center-align">
                <i class="fa fa-check font18 green"></i>
              </td>
              <td></td>
            </tr>
            <tr>
              <td>Project 3</td>
              <td class="center-align">
                <i class="fa fa-check font18 green"></i>
              </td>
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </div>
      <pre><code>
  &lt;table class="table table-bordered"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th rowspan="2"&gt;Name&lt;/th&gt;
              &lt;th rowspan="2"&gt;Type&lt;/th&gt;
              &lt;th colspan="3"&gt;Languages&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th&gt;Ruby&lt;/th&gt;
              &lt;th&gt;JavaScript&lt;/th&gt;
              &lt;th&gt;Python&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;Alpha Team&lt;/td&gt;
              &lt;td&gt;Project 1&lt;/td&gt;
              &lt;td class="center-align"&gt;
                  &lt;i class="fa fa-check font18 green"&gt;&lt;/i&gt;
              &lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td rowspan="3"&gt;Beta Team&lt;/td&gt;
              &lt;td&gt;Project 1&lt;/td&gt;
              &lt;td class="center-align"&gt;
                  &lt;i class="fa fa-check font18 green"&gt;&lt;/i&gt;
              &lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Project 2&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td class="center-align"&gt;
                  &lt;i class="fa fa-check font18 green"&gt;&lt;/i&gt;
              &lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Project 3&lt;/td&gt;
              &lt;td class="center-align"&gt;
                  &lt;i class="fa fa-check font18 green"&gt;&lt;/i&gt;
              &lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;      
      </code></pre>
    </section>

    <h4>排列紧密的表格</h4>
    <section>
      <div class="example">
        <table class="table table-bordered table-condensed">
          <thead>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Address</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Jay</td>
              <td>23</td>
              <td>New York No. 1 Lake Park</td>
            </tr>
            <tr>
              <td>Mike</td>
              <td>43</td>
              <td>London No. 1 Lake Park</td>
            </tr>
            <tr>
              <td>Larry</td>
              <td>18</td>
              <td>Sidney No. 1 Lake Park</td>
            </tr>
          </tbody>
        </table>
      </div>
      <pre><code>
  &lt;table class="table table-bordered table-condensed"&gt;
      ...
  &lt;/table&gt;
      </code></pre>
    </section>

    <h4>单元格状态</h4>
    <section>
      <div class="example">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>Name</th>
              <th>Status</th>
              <th>Notes</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>No Name Specified</td>
              <td>Unknown</td>
              <td class="warning">None</td>
            </tr>
            <tr class="success">
              <td>Jay</td>
              <td>
                <i class="fa fa-check font18 green"></i>
                Approved
              </td>
              <td>None</td>
            </tr>
            <tr>
              <td>Mike</td>
              <td>Unknown</td>
              <td>Requires call</td>
            </tr>
            <tr class="error">
              <td>Larry</td>
              <td>
                <i class="fa fa-close font18 red"></i>
                Denied
              </td>
              <td>None</td>
            </tr>
          </tbody>
        </table>
      </div>
      <pre><code>
  &lt;table class="table table-bordered"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Status&lt;/th&gt;
              &lt;th&gt;Notes&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;No Name Specified&lt;/td&gt;
              &lt;td&gt;Unknown&lt;/td&gt;
              &lt;td class="warning"&gt;None&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="success"&gt;
              &lt;td&gt;Jay&lt;/td&gt;
              &lt;td&gt;
                  &lt;i class="fa fa-check font18"&gt;&lt;/i&gt;
                  Approved
              &lt;/td&gt;
              &lt;td&gt;None&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Mike&lt;/td&gt;
              &lt;td&gt;Unknown&lt;/td&gt;
              &lt;td&gt;Requires call&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="error"&gt;
              &lt;td&gt;Larry&lt;/td&gt;
              &lt;td&gt;
                  &lt;i class="fa fa-close font18"&gt;&lt;/i&gt;
                  Denied
              &lt;/td&gt;
              &lt;td&gt;None&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
      </code></pre>
    </section>

    <h4>选择行</h4>
    <section>
      <div class="example">
        <table class="table table-bordered" id="my-table">
          <thead>
            <tr>
              <th width="10">
                <label class="checkbox">
                  <input type="checkbox"></input>
                  <span></span>
                </label>
              </th>
              <th>Name</th>
              <th>Age</th>
              <th>Address</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <label class="checkbox">
                  <input type="checkbox"></input>
                  <span></span>
                </label>
              </td>
              <td>Jay</td>
              <td>23</td>
              <td>New York No. 1 Lake Park</td>
            </tr>
            <tr>
              <td>
                <label class="checkbox">
                  <input type="checkbox"></input>
                  <span></span>
                </label>
              </td>
              <td>Mike</td>
              <td>43</td>
              <td>London No. 1 Lake Park</td>
            </tr>
            <tr>
              <td>
                <label class="checkbox">
                  <input type="checkbox"></input>
                  <span></span>
                </label>
              </td>
              <td>Larry</td>
              <td>18</td>
              <td>Sidney No. 1 Lake Park</td>
            </tr>
          </tbody>
        </table>
      </div>
      <pre class="html"><code>  &lt;!-- html --&gt;
  &lt;table class="table table-bordered" id="my-table"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th width="10"&gt;
                  &lt;label class="checkbox"&gt;
                      &lt;input type="checkbox"&gt;&lt;/input&gt;
                      &lt;span&gt;&lt;/span&gt;
                  &lt;/label&gt;
              &lt;/th>
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Age&lt;/th&gt;
              &lt;th&gt;Address&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;label class="checkbox"&gt;
                      &lt;input type="checkbox"&gt;&lt;/input&gt;
                      &lt;span&gt;&lt;/span&gt;
                  &lt;/label&gt;
              &lt;/td&gt;
              &lt;td&gt;Jay&lt;/td&gt;
              &lt;td&gt;23&lt;/td&gt;
              &lt;td&gt;New York No. 1 Lake Park&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;label class="checkbox"&gt;
                      &lt;input type="checkbox"&gt;&lt;/input&gt;
                      &lt;span&gt;&lt;/span&gt;
                  &lt;/label&gt;
              &lt;/td&gt;
              &lt;td&gt;Mike&lt;/td&gt;
              &lt;td&gt;43&lt;/td&gt;
              &lt;td&gt;London No. 1 Lake Park&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;label class="checkbox"&gt;
                      &lt;input type="checkbox"&gt;&lt;/input&gt;
                      &lt;span&gt;&lt;/span&gt;
                  &lt;/label&gt;
              &lt;/td&gt;
              &lt;td&gt;Larry&lt;/td&gt;
              &lt;td&gt;18&lt;/td&gt;
              &lt;td&gt;Sidney No. 1 Lake Park&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
      </code></pre>
      <pre class="javascript"><code>  // javascript
  $('#my-table thead').find('[type=checkbox]').on('click', function(event) {
      if ($(this).prop('checked') === true) {
          $('#my-table tbody').find('[type=checkbox]').prop('checked', true);
      } else {
          $('#my-table tbody').find('[type=checkbox]').prop('checked', false);
      }
  });
      </code></pre>
    </section>
    
    <script>
      $('#op-select').select();
      $(document).ready(function() {
        $('pre code').each(function(i, block) {
          hljs.highlightBlock(block);
        });
      });
      $('#my-table thead').find('[type=checkbox]').on('click', function(event) {
        if ($(this).prop('checked') === true) {
          $('#my-table tbody').find('[type=checkbox]').prop('checked', true);
        } else {
          $('#my-table tbody').find('[type=checkbox]').prop('checked', false);
        }
      });
    </script>
  </body>
</html>